Swiping Cards

The SwipingCards step is a special question template that mimics the Tinder-style swipe interaction. It presents a stack of cards that can be swiped left or right. Each card includes a text and a variant property. A template should define at least one card to enable the interaction.

Step Config

Key	Description	Is Optional?
type	Should be swipingCards to differs from other steps.	Required
stepId	Unique step identifier.	Required
backgroundColor	The background color of the page.	Optional
cta	Copy and style of [Swiping Cards](Swiping Cards) button	Required
cards	Used to define the [Swiping Cards](Swiping Cards) used	Required
skipIntro	Boolean to skip the intro	Optional
skipOutro	Boolean to skip the outro	Optional

CTA Config

Key	Description	Is Optional?
text	CTA text.	Required
textColor	CTA text color.	Optional
backgroundColor	The background color of the CTA.	Optional

Cards Config

Key	Description	Is Optional?
text	Card text.	Required
variant	[Swiping Cards](Swiping Cards) must be on of the following values `'green'	'jade'
yesValue	Value if user swiped right. The results of all the answers in this step are returned as an array in order to select a specific answer you should add the index while [Supported Logic](../Supported Logic).	Required
noValue	Value if user swiped left. The results of all the answers in this step are returned as an array in order to select a specific answer you should add the index while [Supported Logic](../Supported Logic).	Required

Variants

Variant	Example
green
jade
shell

Example

SwipingCards

{
  "id": "fabulous_app_id2",
  "journeyId": "6Gr4B9SkA3",
  "bold": true,
  "appId": "co.thefabulous.app",
  "language": "en",
  "seo": {
      "title": "Fabulous",
      "favicon": "https://www.thefabulous.co/images/favicon.png",
      "description": "Track Your Way to Better Mental Health with A Top-Ranked App. Say Goodbye to uncertainty with Fabulous, Kickstart your day with a productive and healthy routine."
  },
  "managerConfig": {
      "type": "energy",
      "properties": {
          "onboarding_in_app_message_sequence_enabled": false,
          "onboarding_play_alternate_pings": true,
          "onboarding_play_background_music": true
      }
  },
  "steps": [
      {
          "stepId": "swiping_cards",
          "type": "swipingCards",
          "backgroundColor": "#BBF8EB",
          "cta": {
            "text": "Continue",
            "backgroundColor": "#00D6BC",
            "textColor": "#FFFFFF"
          },
          "cards": [
            { "variant": "green", "text": "I'm easily distracted when working or studying" },
            { "variant": "jade", "text": "I'm forgetful" },
            { "variant": "shell", "text": "I work best when a deadline is around the corner" },
            { "variant": "green", "text": "I'm easily distracted when working or studying" },
            { "variant": "jade", "text": "I'm forgetful" },
            { "variant": "shell", "text": "I work best when a deadline is around the corner" }
          ]
      },
      {
          "type": "webview",
          "stepId": "webviewPremium49",
          "engine": "premium",
          "module": "webfloating_pricing_control",
          "hideCloseButton": true,
          "subprintText": "",
          "subprintColor": "#9B9B9B",
          "topSubprintColor": "#5F5F5F",
          "isOffer": true,
          "showTrialReminderDialog": true,
          "backgroundColor": "#0004A3",
          "ctaText": "Continue",
          "topSubprintText": "2 taps to start, super easy to cancel",
          "deepLink": "{{APPLICATION_ID}}://pay/normalannual",
          "redirectTo": "https://start.thefabulous.co/payment/pwyw/new-bi-monthly-39-fb?discount=25&upsellFlowId=fabulous_upsell_bundle_5apps_49_pdf_expert",
         "ctaColor": "#FFFFFF",
          "ctaBackgroundColor": "#251C93"
      }
  ],
  "logic": []
}